import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, Descriptions, Image, Empty, Tag, Button } from 'antd';
import styled from 'styled-components';
import AfterSaleStatus from '../../components/Mobile/AfterSaleStatus';

const Container = styled.div`
  padding: 16px;
  background: #f5f5f5;
  min-height: 100vh;
`;

const StyledCard = styled(Card)`
  margin-bottom: 16px;
`;

const ImageContainer = styled.div`
  display: flex;
  gap: 8px;
  margin-top: 8px;
`;

const AfterSaleDetail = () => {
  const { afterSaleId } = useParams();
  const [afterSale, setAfterSale] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    // 从 localStorage 获取售后记录
    const afterSales = JSON.parse(localStorage.getItem('afterSales') || '[]');
    const found = afterSales.find(item => item.id === afterSaleId);
    if (found) {
      setAfterSale(found);
    }
  }, [afterSaleId]);

  if (!afterSale) {
    return (
      <Container>
        <Empty description="未找到售后记录" />
      </Container>
    );
  }

  return (
    <Container>
      <AfterSaleStatus afterSale={afterSale} />
      
      <StyledCard title="售后信息">
        <Descriptions column={1}>
          <Descriptions.Item label="售后单号">{afterSale.id}</Descriptions.Item>
          <Descriptions.Item label="订单号">{afterSale.orderId}</Descriptions.Item>
          <Descriptions.Item label="类型">{afterSale.type === 'refund' ? '仅退款' : '退货退款'}</Descriptions.Item>
          <Descriptions.Item label="状态">
              {afterSale.status === 'PENDING' && <Tag color="orange">待审核</Tag>}
              {afterSale.status === 'APPROVED' && <Tag color="green">等待用户退货</Tag>} {/* 显示正确状态提示 */}
              {afterSale.status === 'RETURNING' && <Tag color="blue">退货中，等待商家确认收货</Tag>}
              {afterSale.status === 'REFUNDED' && <Tag color="purple">退货成功，已退款</Tag>}
              {afterSale.status === 'REJECTED' && <Tag color="red">已驳回</Tag>}
          </Descriptions.Item>
          {/* 仅当状态为APPROVED时显示填写物流按钮 */}
          {afterSale.status === 'APPROVED' && afterSale.type === 'return' && (
            <Button type="primary" style={{ marginTop: 24 }} onClick={() => navigate(`/app/after-sale/logistics/${afterSale.id}`)}>
              填写退货物流
            </Button>
          )}

          
          <Descriptions.Item label="申请时间">{new Date(afterSale.createTime).toLocaleString()}</Descriptions.Item>
          <Descriptions.Item label="退款原因">{afterSale.reason}</Descriptions.Item>
          <Descriptions.Item label="问题描述">{afterSale.description}</Descriptions.Item>

          
        </Descriptions>
       
    
      </StyledCard>
    </Container>
  );
};

export default AfterSaleDetail;